<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>盛大彩票</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<link href="/css/common/common.css" rel="stylesheet" type="text/css">
<script src="/js/common/common.js"></script>
<style type="text/css">
.carousel-indicators li {
	cursor: pointer;
}

.carousel-item img {
	width: 100%;
	height: 240px;
}

.latest-notice {
	height: 60px;
	overflow: hidden;
	line-height: 60px;
	margin-bottom: 10px;
}

.latest-notice .latest-notice-label>span {
	float: left;
	line-height: 60px;
	color: #e4393c;
	font-size: 16px;
	font-weight: 700;
}

.latest-notice .latest-notice-summary {
	float: left;
	cursor: pointer;
	width: 90%;
	height: 60px;
	line-height: 60px;
	font-size: 14px;
	color: #666;
}

.lottery-information-card .card-body {
	height: 300px;
	overflow: hidden;
}

.lottery-information-card .card-header {
	background-color: unset;
}

.latest-lottery-information label {
	padding-right: 20px;
	color: red;
}

.latest-lottery-information {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.latest-lottery-information span {
	cursor: pointer;
}

.latest-lottery-information span:hover {
	color: red;
}

.lottery-information-title {
	padding-bottom: 16px;
	cursor: pointer;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lottery-information-title:hover {
	color: red;
}

.winning-rank-card .card-header {
	background-color: unset;
}

.winning-rank-card .card-body {
	height: 300px;
	overflow: hidden;
}

.winning-rank-marquee {
	height: 260px;
}

.winning-rank {
	display: flex;
	flex-flow: column;
	border-bottom: 1px solid #dedede;
}

.game-name-and-issue-num {
	flex: 1;
	display: flex;
}

.game-name {
	flex: 1;
}

.issue-num {
	flex: 1;
}

.user-name-and-winning-amount {
	flex: 1;
	display: flex;
}

.user-name {
	flex: 1;
}

.winning-amount {
	flex: 1;
}

.winning-rank-highlight {
	color: red;
}

.advantage {
	text-align: center;
	padding-top: 30px;
	padding-bottom: 30px;
}

.advantage div {
	display: inline-block;
	padding-right: 30px;
}

.advantage img {
	padding-right: 20px;
}

.notice-title {
	background-color: #dedede;
	border-radius: 30px;
	text-align: center;
	margin-bottom: 12px;
	color: #fff;
	cursor: pointer;
}

.selected-system-notice {
	background-color: #ce1515;
}
</style>
</head>

<body style="height: 100%;">
	<div class="container">
		<div th:replace="common/header::html"></div>
		<div id="index" v-cloak>
			<div id="demo" class="carousel slide" data-ride="carousel">

				<!-- 指示符 -->
				<ul class="carousel-indicators">
					<li data-target="#demo" data-slide-to="0" class="active"></li>
					<li data-target="#demo" data-slide-to="1"></li>
					<li data-target="#demo" data-slide-to="2"></li>
				</ul>

				<!-- 轮播图片 -->
				<div class="carousel-inner">
					<div class="carousel-item active">
						<img src="https://static-pc.0631110.com/xy00009/images_fh/upload/2019/02/1550573590770.jpg">
					</div>
					<div class="carousel-item ">
						<img src="https://static-pc.0631110.com/xy00009/images_fh/upload/2019/01/1547973830185.jpg">
					</div>
					<div class="carousel-item">
						<img src="https://static-pc.0631110.com/xy00009/images_fh/upload/2019/01/1547973866239.jpg">
					</div>
				</div>
			</div>
			<div class="latest-notice">
				<div class="latest-notice-label">
					<span>最新公告：</span>
				</div>
				<div class="latest-notice-summary" v-on:click="showLatestNoticeModal">
					<marquee>
						<div>
							<label v-for="systemNotice in systemNotices" style="padding-right: 26px;"><span style="padding-right: 6px;">{{systemNotice.noticeTitle}}</span><span>{{systemNotice.publishDate}}</span></label>
						</div>
					</marquee>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-8">
					<div class="card lottery-information-card">
						<div class="card-header">彩票资讯</div>
						<div class="card-body">
							<div class="latest-lottery-information" v-if="informations.length != 0">
								<label>.NEW</label><span v-on:click="toInformationDetailsPage(informations[0].id)">{{informations[0].title}}</span>
							</div>
							<div class=row>
								<div class="col-sm-6 lottery-information-title" v-for="(information, index) in informations" v-if="index != 0" v-on:click="toInformationDetailsPage(information.id)">{{information.title}}</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-4">
					<div class="card winning-rank-card">
						<div class="card-header">中奖排行</div>
						<div class="card-body">
							<marquee class="winning-rank-marquee" direction="up" behavior="scroll" scrollamount="5" onmouseover="stop()" onmouseout="start()">
								<div class="winning-rank" v-for="winningRank in winningRanks">
									<div class="game-name-and-issue-num">
										<div class="game-name">{{winningRank.gameName}}</div>
										<div class="issue-num">{{winningRank.issueNum}}期</div>
									</div>
									<div class="user-name-and-winning-amount">
										<div class="user-name">
											恭喜<span class="winning-rank-highlight">{{winningRank.userName}}</span>
										</div>
										<div class="winning-amount">
											喜中<span class="winning-rank-highlight">{{winningRank.totalWinningAmount}}</span>
										</div>
									</div>
								</div>
							</marquee>
						</div>
					</div>
				</div>
			</div>
			<div class="advantage">
				<div>
					<img src="/images/index/safety.png" /><span>账户安全</span>
				</div>
				<div>
					<img src="/images/index/quick.png" /><span>购彩便捷</span>
				</div>
				<div>
					<img src="/images/index/exchange.png" /><span>兑换简单</span>
				</div>
				<div>
					<img src="/images/index/drawing.png" /><span>提款迅速</span>
				</div>
			</div>

			<div v-show="showLatestNoticeModalFlag">
				<div class="modal-mask">
					<div class="modal-wrapper">
						<div class="modal-dialog">
							<div class="modal-content" style="width: 640px;">
								<div class="modal-header">
									<h5 class="modal-title">
										<span style="color: #B3544F;">公告</span>
									</h5>
									<button type="button" class="close" data-dismiss="modal" aria-label="Close" v-on:click="showLatestNoticeModalFlag = false">
										<span aria-hidden="true">&times;</span>
									</button>
								</div>
								<div class="modal-body" style="height: 310px;">
									<div class="row" style="height: 100%;">
										<div class="col-sm-4">
											<div class="notice-title" v-for="systemNotice in systemNotices" v-bind:class="{'selected-system-notice': selectedSystemNotice == systemNotice}" v-on:click="selectedSystemNotice = systemNotice;">
												<span>{{systemNotice.noticeTitle}}</span>
											</div>
										</div>
										<div class="col-sm-8">
											<div style="border: 1px solid #ced4da; height: 100%; border-radius: 7px; padding-left: 10px;">
												<div v-html="selectedSystemNotice.noticeContent"></div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		var indexVM = new Vue({
			el : '#index',
			data : {
				systemNotices : [],
				showLatestNoticeModalFlag : false,
				selectedSystemNotice : {},
				informations : [],
				winningRanks : []
			},
			computed : {},
			created : function() {
			},
			mounted : function() {
				var inviteCode = getQueryString('inviteCode');
				if (inviteCode != null) {
					window.sessionStorage.setItem('inviteCode', inviteCode);
				}
				this.loadTop5PublishedSystemNotice();
				this.loadTop13Information();
				this.loadTop50WinningRank();
			},
			methods : {
				toInformationDetailsPage : function(id) {
					window.location.href = '/information-details?id=' + id;
				},
				
				loadTop5PublishedSystemNotice : function() {
					var that = this;
					that.$http.get('/systemNotice/findTop5PublishedSystemNotice', ).then(function(res) {
						that.systemNotices = res.body.data;
					});
				},
				
				loadTop13Information : function() {
					var that = this;
					that.$http.get('/lotteryInformation/findTop13Information', ).then(function(res) {
						that.informations = res.body.data;
					});
				},
				
				loadTop50WinningRank : function() {
					var that = this;
					that.$http.get('/betting/findTop50WinningRank', ).then(function(res) {
						that.winningRanks = res.body.data;
					});
				},

				showLatestNoticeModal : function() {
					this.showLatestNoticeModalFlag = true;
					if (this.systemNotices.length > 0) {
						this.selectedSystemNotice = this.systemNotices[0];
					}
				}
			}
		});
	</script>
</body>
</html>